<template class="${classes}">
    <import from="./titlebar/titlebar"></import>
    <import from="./statusbar/statusbar"></import>
    <import from="./work-area/work-area"></import>

    <div class="window">
        <titlebar if.bind="settings.appearance.titlebar.type === 'Integrated' & oneTime"></titlebar>

        <div id="window-main-content" class="flex-grow-1 d-flex flex-row fade-in">
            <au-compose component.bind="leftPaneHost" containerless></au-compose>
            <div id="window-middle-content" class="flex-grow-height-restricted d-flex flex-column">
                <work-area class="flex-grow-height-restricted"></work-area>
                <au-compose component.bind="bottomPaneHost" containerless></au-compose>
            </div>
            <au-compose component.bind="rightPaneHost" containerless></au-compose>
        </div>

        <statusbar></statusbar>

        <div class="toast-container overflow-hidden"
             data-bs-theme.bind="settings.appearance.theme === 'Dark' ? 'dark' : 'light'"
             style="overflow-y: auto; bottom: 30px; left: 50%; transform: translateX(-50%)">

            <div class="d-flex flex-column align-items-center overflow-x-hidden hide-scrollbar gap-2"
                 style="max-height: 250px;">
            </div>
        </div>
    </div>
</template>
